<template>
  <view class="page-body">
	  <u-navbar :is-back="false" title="报销单填写"
	    title-size="30"
	    :background="{background:'#2B88FE' }"
	    title-color="#fff">
	    <div class="head_icon">
	      <u-icon @click="$api.handleBackTo"
	        name="arrow-left" color="#fff"
	        size="36">
	      </u-icon>
	      <u-icon @click="$api.handleHomeTo"
	        name="home" color="#fff" size="36">
	      </u-icon>
	    </div>
	  </u-navbar>	
	  
    <view class="clist x-row borderBottom">
      <view class="x-col-center cname">
        报销事由
      </view>
      <input placeholder="请输入" v-model="form.fTitle " class="x-col x-col-center ">

      </input>
    </view>
    <view class="clist x-row">
      <view class="x-col-center cname">
        报销金额
      </view>
      <input placeholder="请输入" v-model="form.fMoney " type="digit"
        class="x-col x-col-center "></input>
      <view class="rmb x-col-center">
        元
      </view>
    </view>
    <view class="h16">

    </view>
    <view class="infos whiteBg">
      <view class="clist x-row ">
        <view class="x-col-center cname" style="width: 300rpx;">
          报销情况说明
        </view>
      </view>
      <textarea v-model="form.fContent" class="txt" placeholder="请在此输情况说明…"></textarea>

      <view class="clist x-row">
        <view class="x-col-center cname">
          票据展现
        </view>
      </view>
      <u-upload ref="uUpload" :header="header" max-count="8" name="file" :action="action"
        :auto-upload="true">
      </u-upload>
    </view>
    <view :style="{height:height}"></view>
    <view class="viewbbutton" :style="{height:height}">
      <button class="sendBomBtn" @click="submit">提 交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        fType: 1,
        fMoney: '',
        fPics: '',
        fTitle: '',
        fContent: ''
      },
      header: {
        token: uni.getStorageSync('token')
      },
	  clineOnce:true,
      height: this.but_height(),
      action: this.urlimg + 'api/Upfile/PostImgFile',
      clist: [],
      isAllList: 1,
      page: 1,
      status: 'loading',
      loading: true
    }
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: '新增报销'
    })
  },
  methods: {
    // user/submit_apply 			新增报销
    submit() {
		if (!this.clineOnce) return false
		this.clineOnce = false
      this.form.fPics = this.$api.getreqImg(this.$refs.uUpload.lists)
      this.$axios('api/WorkBill/AddDetail', 'post', { value: this.form }).then(res => {
		  if (!res.Success) {
		    uni.showToast({
		      title: '提交失败：'+res.Message,
		      icon: 'none',
		      duration: 2000
		    })
			 	this.clineOnce = true
		    return false
		  }
		  
        this.$api.handleBack('新增报销成功')
      })
    }
  }
}
</script>

<style lang="scss">
.clist {
  padding: 34rpx 32rpx;
  box-sizing: border-box;
  background-color: #ffffff;
  .cname {
    width: 164rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #34404a;
  }

  .rmb {
    font-size: 30rpx;
    font-weight: 400;
    color: #34404a;
  }
}
.infos {
  padding: 0 32rpx;
  .clist {
    padding-left: 0;
    padding-right: 0;
  }
  .txt {
    height: 320rpx;
    background: #f8f9fc;
    border-radius: 16rpx;
    border: 2rpx solid rgba(0, 0, 0, 0.09);
    padding: 22rpx 20rpx;
    box-sizing: border-box;
    width: 100%;
  }
}
.h16 {
  height: 16rpx;
  background-color: #f5f7f9;
}
</style>
